<template>
    <view class="uls">
        <view class="li" @click="movieClick(item)" v-for="(item, index) in viewModel" :key="index">
            <view class="left-box">
                <image class="puase" src="/sub_pages/movie/static/image/icon/icon_4.png" mode="aspectFill"></image>
                <u--image width="150rpx" height="210rpx" radius="5" :src="item.pic" :showLoading="true" :lazy-load="true"></u--image>
            </view>
            <view class="right-box">
                <view class="title">{{ item.filmName }}</view>
                <view class="bottom">
                    <view class="content-box">
                        <view class="item">
                            评分：
                            <text class="score">{{ item.score }}</text>
                        </view>
                        <view class="item">导演：{{ item.director || '无' }}</view>
                        <view class="item u-line-1">主演：{{ item.actor || '无' }}</view>
                    </view>

                    <view v-if="tabsIndex == 0">
                        <u-button text="购票" v-if="isCheckDay(item)" type="warning" size="mini" shape="circle"></u-button>
                        <u-button text="预售" v-else type="primary " size="mini" shape="circle"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        viewModel: {
            type: Array,
            default: () => [],
        },
        tabsIndex: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        // getSyle(num) {
        // 	return uni.upx2px(num)
        // },
        isCheckDay(e) {
            return this.tabsIndex === 0;
        },
        movieClick(e) {
            if (!this.isCheckDay()) return;

            let url = `/sub_pages/movie/show/show?id=${e.filmId}&title=${e.filmName}&type=${this.isCheckDay(e) ? 1 : 2}`;
            // let url = `/sub_pages/movie/show/show?id=${e.filmId}&title=${e.filmName}`;
            uni.navigateTo({
                url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.uls {
    padding: 30rpx;
    .li {
        display: flex;
        height: 210rpx;
        margin-bottom: 30rpx;
        .left-box {
            width: 150rpx;
            height: 210rpx;
            position: relative;
            background-color: #f3f4f6;
        }
        .right-box {
            flex: 1;
            margin-left: 20rpx;
            height: 210rpx;
        }
        .puase {
            width: 42rpx;
            height: 42rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .title {
            @include font(32rpx, #333, bold);
            @include txtEilLines;
        }
        .bottom {
            display: flex;
            margin-top: 30rpx;
        }
        .content-box {
            flex: 1;
        }
        .score {
            @include font(30rpx, #f8922d, bold);
            padding-left: 9rpx;
        }
        .item {
            margin-top: 10rpx;
            margin-right: 10rpx;
            @include font(26rpx, #666666, 500);

            &:nth-child(1) {
                flex-direction: row;
            }
        }
    }
}
</style>
